body {
    padding: 100px;
}

/* 连字符断行 */
.hyphenation {
    border: 1px solid skyblue;
    width: 150px;
    padding: 10px;
    text-align: justify;
    hyphens: auto;
}

/* 插入换行 */
.line-breaks {
    display: inline-block;
    padding: 10px;
    border: 1px solid #ddd;
}

.line-breaks dt,
.line-breaks dd {
    display: inline;
}

.line-breaks dd {
    margin: 0;
    font-weight: bold;
}

.line-breaks dd + dd::before {
    content: ', ';
    font-weight: normal;
    margin-left: -0.25em;
}

/*.line-breaks dd::after {*/
/*    content: '\A';*/
/*    white-space: pre;*/
/*}*/

.line-breaks dd + dt::before {
    content: '\A';
    white-space: pre;
}

/*文本行的斑马条纹*/
.zebra-lines {
    display: inline-block;
    padding: 0.5em;
    line-height: 1.5;
    background: beige;
    background-image: linear-gradient(rgba(0, 0, 0, 0.2) 50%, transparent 0);
    background-size: auto 3em;
    background-origin: content-box;
}

/*华丽的&符号*/
@font-face {
    font-family: Ampersand;
    src: local('Baskerville-Italic'), local('GoudyOldStyle-Italic'), local('Palation-Italic'), local('BookAntiqua-Italic');
    unicode-range: U+26;
}

.ampersands {
    display: inline-block;
    font-weight: bold;
    font-family: Ampersand, Helvetica, sans-serif;
}

/*自定义下划线*/
.underlines {
    display: inline-block;
    /*width: 200px;*/
    background: linear-gradient(90deg, gray 66%, transparent 0) repeat-x 0 1.2em / 0.4em 2px;
    /*text-shadow: 0.5em 0 white, -0.5em 0 white;*/
}

/*凸起印刷效果*/
.letterpress {
    width: 150px;
    padding: 10px;
    /*background: hsl(210, 13%, 60%);*/
    /*color: hsl(210, 13%, 30%);*/
    /*text-shadow: 0 1px 1px hsla(0, 0%, 100%, 0.8);*/

    background: hsl(210, 13%, 40%);
    color: hsl(210, 13%, 70%);
    text-shadow: 0 -1px 1px black;
}

/*空心字效果*/
.stroked-text {
    width: 200px;
    padding: 10px;
    color: white;
    font-size: 40px;
    background: deeppink;
    text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
}

/*文字外发光效果*/
.glow {
    display: inline-block;
    padding: 20px 30px;
    background: #203;
    color: white;
    font-size: 50px;
    transition: 1s;
}

.glow:hover {
    /*color: transparent;*/
    /*text-shadow: 0 0 0.1em, 0 0 0.3em;*/
    filter: blur(0.1rem);
}

/*文字凸起效果*/
.extruded {
    display: inline-block;
    padding: 20px 30px;
    font-size: 50px;
    background: #58a;
    color: white;
    text-shadow: 0 1px hsl(0, 0%, 85%), 0 2px hsl(0, 0%, 80%), 0 3px hsl(0, 0%, 75%), 0 4px hsl(0, 0%, 70%), 0 5px hsl(0, 0%, 65%), 0 5px 10px black;
}
